<template>
  <div>
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <!-- 购物车列表数据 -->
    <div
      class="cart-list"
      v-for="(item, index) in $store.state.cart_list"
      :key="item.id"
    >
    <div class="left">
        <van-checkbox v-model="$store.state.checked"></van-checkbox>
    </div>
      <van-card
        :price="item.price"
        :title="item.title"
        :thumb="item.pic"
      >
      <template #num>
          <van-stepper v-model="item.num"></van-stepper>
      </template>
      <template #footer>
        <van-button type="danger" size="mini" @click="remove(index)">删除</van-button>
              
          
      </template>
      </van-card>
    </div>
    <van-submit-bar :price="$store.getters.totals*100" button-text="提交订单" />
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [], // 局部注册的组件
  components: {}, // 组件状态值
  data() {
    return {};
  }, // 计算属性
  computed: {}, // 侦听器
  watch: {}, // 组件方法
  methods: {
      remove(index){
          this.$store.commit("remove",index);
      }
  }, // 以下是生命周期钩子 注：没用到的钩子请自行删除
  created() {},
  mounted() {},
  updated() {},
  beforeRouteEnter (to, from, next) {
      next((vm)=>{
          if(vm.$store.state.m_token==""){
              vm.$router.push("/login")
          }
      })
  }
};
</script>

<style scoped>
.cart-list {
  width: 100%;
  display: flex;
  align-items: center;
}
.van-card {
  width: 90%;
}
</style>
